<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '活动列表',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <div class="list">
    <LoadPage ref="loadPage" :url="url" :immediate="false">
      <template #default="{ list }">
        <div class="active-list" v-if="list.length > 0">
          <Active v-for="(item, index) in list" :data="item" :key="index" />
        </div>
      </template>
    </LoadPage>
  </div>
</template>

<script lang="ts" setup>
import Active from '@/pages-sub/g-components/Active/index.vue'

const url = ref('/activity-app/open/page')
const filter: any = {}
const loadPage = ref()

onLoad((query) => {
  if (query.myjoin) {
    url.value = '/activity-app/myJoinPage'
  }
  if (query.createUser) {
    filter.createUser = query.createUser
  }

  getData(true)
})

// 上拉加载
onReachBottom(() => {
  loadPage.value?.getMore(filter)
})
// 下拉刷新
onPullDownRefresh(() => {
  loadPage.value?.getData(filter, true)
})

function getData(isRa = false) {
  if (loadPage.value) {
    loadPage.value?.getData(filter, isRa)
  } else {
    setTimeout(() => {
      getData(isRa)
    }, 300)
  }
}
</script>

<style scoped lang="scss">
.list {
  min-height: 100vh;
  padding: 28rpx 30rpx;
  background-color: var(--bgc4);

  .active-list {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 30rpx;
    :deep(.wot-theme-light:last-child) {
      .active {
        padding-bottom: 0;
        margin-bottom: 0;
        @include border-bottom(transparent);
      }
    }
  }
}
</style>
